<template>
  <div class="map-card">
    <div class="map-content" ref="map" id="map"></div>
    <div class="show-lon-lat">
      <div class="lon-lat">LV_{{ currentOptions.zoom.toFixed(0) }}</div>
      <div class="show-item">
        {{ transfLonAndLat(currentOptions.center[0], "lon", true) }}
      </div>
      <div class="show-item">
        {{ transfLonAndLat(currentOptions.center[1], "lat", true) }}
      </div>
    </div>
  </div>
</template>

<script>
import xMaps from "x-maps";
import "x-maps/xMaps.css";
import { transfLonAndLat } from "@/utils/chart.js";
import { getLatest as getAISLatest } from "@/api/cabin/aisData";
import { getLatest as getRadarLatest } from "@/api/cabin/radarData";
let AISInterval = null;
let GPSInterval = null;
const MAPURL = process.env.VUE_APP_MAP_URL;

export default {
  props: {
    shipInfo: {
      type: Object,
      default: () => {
        return {
          lon: 0,
          lat: 0,
          hod: 0,
        };
      },
    },
  },
  data() {
    return {
      transfLonAndLat,
      isActive: false, // 默认关闭
      map: null,
      mapToolInfo: {
        mapZoom: 14,
        AIS: true,
        radar: false,
      },
      options: {
        center: [119.59355478904757, 32.25841220407902],
        zoom: 14,
        id: "map",
        minZoom: 4,
        maxZoom: 18,
        mapUrl: MAPURL,
      },
      currentOptions: {
        zoom: 0,
        mouseCenter: [0, 0],
        center: [0, 0],
      },
      AISList: [],
      radarList: [],
      isFirst: false,
    };
  },
  computed: {},
  methods: {
    shipMove(row) {
      this.map.drawShips([row], {
        id: "my_ships",
        color: "#3ADEAB",
      });
      if (!this.isFirst && row.lon && row.lat) {
        this.isFirst = true;
        this.moveTo(row);
      }
    },
    otherShipMove(row) {
      row.heading = row.hod;
      const index = this.AISList.findIndex((m) => m.mmsi === row.mmsi);
      if (index >= 0) {
        this.AISList[index] = row;
      } else {
        this.AISList.push(row);
      }
      this.map.drawShips(this.AISList, {
        id: "other_ships",
        color: "#FFFF66",
      });
    },
    radarShipMove(row) {
      row.heading = row.hod;
      const index = this.radarList.findIndex((m) => m.mmsi === row.mmsi);
      if (index >= 0) {
        this.radarList[index] = row;
      } else {
        this.radarList.push(row);
      }
      this.map.addMarkers({
        list: this.radarList,
        icon: "/img/map/radar.png",
        id: "radar_marker",
        style: {
          iconSize: 1.5,
        },
      });
    },
    moveTo(row = this.shipInfo) {
      this.map.moveTo({
        center: [row.lon, row.lat],
        zoom: this.currentOptions.zoom,
      });
    },
    getAISLatest() {
      if (!this.mapToolInfo.AIS) return;
      getAISLatest().then(({ data }) => {
        if (!this.mapToolInfo.AIS) return;
        this.AISList = data.map((m) => {
          m.heading = m.hod;
          m.title = m.shipName;
          return m;
        });
        this.map.drawShips(this.AISList, {
          id: "other_ships",
          color: "#FFFF66",
        });
        this.map.addMarkers({
          list: this.AISList,
          icon: "/img/map/shipName.png",
          id: "ship_name",
          style: {
            iconSize: 1,
            textAnchor: "top",
            textSize: 12,
          },
        });
      });
    },
    getRadarLatest() {
      if (!this.mapToolInfo.radar) return;
      getRadarLatest().then(({ data }) => {
        if (!this.mapToolInfo.radar) return;
        this.radarList = data.map((m) => {
          m.lon = m.targetLon;
          m.lat = m.targetLat;
          return m;
        });
        this.map.addMarkers({
          list: this.radarList,
          icon: "/img/map/radar.png",
          id: "radar_marker",
          style: {
            iconSize: 1,
          },
        });
      });
    },
  },
  watch: {
    shipInfo: {
      handler(val, oldVal) {
        const initInfo = {
          mmsi: 123456789,
          lon: 0,
          lat: 0,
          hod: 0,
        };
        if (
          val.lon !== oldVal.lon ||
          val.lat !== oldVal.lat ||
          val.hod !== oldVal.hod
        ) {
          this.shipMove({
            ...initInfo,
            ...val,
            heading: val.hod !== undefined ? val.hod : initInfo.hod,
          });
        }
      },
      deep: true,
    },
    currentOptions: {
      handler(val) {
        this.mapToolInfo.mapZoom = parseInt(val.zoom);
      },
      deep: true,
    },
  },
  mounted() {
    this.map = new xMaps();
    this.map.initMap(this.options);
    this.currentOptions = this.map.mapOptions;
    this.getAISLatest();
    AISInterval = setInterval(() => {
      this.getAISLatest();
    }, 15 * 1000);
    this.getRadarLatest();
    GPSInterval = setInterval(() => {
      this.getRadarLatest();
    }, 15 * 1000);
  },
  destroyed() {
    clearInterval(AISInterval);
    clearInterval(GPSInterval);
  },
};
</script>

<style scoped lang="scss">
.map-card {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  .map-content {
    height: 100%;
    background-color: #99b3cc;
  }
  .map-tool {
    width: 100%;
    height: 60px;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .show-lon-lat {
    position: absolute;
    display: flex;
    bottom: 15px;
    right: 15px;
    z-index: 1000;
    background-color: hsla(0, 0%, 100%, 0.7);
    padding: 3px 5px;
    border-radius: 3px;
    .lon-lat {
      text-align: right;
      font-size: 12px;
      color: #333;
      margin-right: 5px;
    }
    .show-item {
      text-align: right;
      font-size: 12px;
      color: #333;
      width: 70px;
      margin: 0 5px;
    }
  }
}
</style>
